<template>
  <div class="log-detail">
    <a-form :model="props.record" :label-col="labelCol" :wrapper-col="wrapperCol">
      <template v-for="(module, index) in modules" :key="index">
        <a-divider orientation="left">{{ module.title }}</a-divider>
        <a-row :gutter="24">
          <template v-for="field in allFields.slice(module.start, module.end)" :key="field.label">
            <a-col :xs="24" :sm="24" :md="12" :lg="12">
              <a-form-item :label="field.label">
                {{ getFieldValue(field) }}
              </a-form-item>
            </a-col>
          </template>
        </a-row>
      </template>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { queryFields as allFields } from './data'
const labelCol = { style: { width: '45%' } }
const wrapperCol = { span: 14 }
const props = defineProps<{
  record: any
}>()
// 模块配置（通过start和end控制slice截取范围）
const modules = [
  { title: '基本信息', start: 0, end: 2 },
  { title: '采集信息', start: 2, end: 8 },
  { title: '详细信息', start: 8, end: 10 },
  { title: '更多属性', start: 10, end: allFields.length }
]

// 修改 getFieldValue 函数签名，约束 prop 类型
const getFieldValue = (field: any) => {
  const value = props.record[field.prop]
  if (!value && value !== 0 && value !== false) return '-'
  if (field.component === 'Select' && field.componentProps?.options) {
    const option = field.componentProps.options.find((opt: any) => opt.value === value)
    return option ? option.label : value
  }
  return value
}
</script>
<style scoped lang="scss">
.log-detail {
  padding: 0px 12px;
  height: 100%;
  overflow: auto;
}
:deep(.ant-divider) {
  font-weight: bold;
}
</style>
